<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script tsrc="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <title>首页</title>
</head>

<style>

    #head{
        position: fixed;
        width:100%;
        top:0;
        z-index:100;
    }

    #app_div1{
        width: 100%;
        height: 80vh;
        display: flex;
        /* border: 1px solid red; */
        background: linear-gradient(#f7e6d3, #fbfcfd);
        justify-content: center;
        align-items: center;
        margin-top: 60px;
    }

    #app_div1_div1{
        border: 1px solid rgb(233, 233, 233);
        width: 80%;
        height: 87%;
        border-radius: 5px;
        box-shadow:0px 10px 10px 10px #888888;
        display: flex;
    }

    #app_div1_div1_div1{
        /* border: 1px solid red; */
        width: 25%;
        height: 100%;
        background: #39364d;
        border-radius: 5px 0px 0px 5px;
        display: flex;
    }

    #app_div1_div1_div1 ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    /*重新设置超链接的样式*/
    a {
        color: #000;
        text-decoration: none;
    }

    /*设置鼠标悬浮超链接上时改变字体颜色*/
    a:hover {
        color: #F00;
    }

    /*设置父级菜单样式*/
    #app_div1_div1_div1>ul>li {
        width: 100%;
        height: 14.3%;
        /* border: 1px red solid; */
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-indent: 2em;
    }

    /*设置父级菜单样式*/
    #app_div1_div1_div1>ul>li>a {
        color: white;
        /* border: 1px red solid; */
        width: 100%;
    }

    /*设置父级菜单样式*/
    #app_div1_div1_div1>ul>li>a>i {
        float: right;
        margin-right: 1px;
    }

    /* 设置子菜单样式 */
    #app_div1_div1_div1 ul li ul {
        display: none;
        position: absolute;
        left: 100%;
        top: 0px;
        width: 250%;
        /* border: 1px solid red; */
        z-index: 5;
        height: 700%;
        background-color: white;
        border-radius: 0px 5px 5px 0px;
    }

    /* 设置子菜单样式 */
    #app_div1_div1_div1 ul li ul li{
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        text-indent: 2em;
    }

    #app_div1_div1_div1 ul li ul li >a{
        color: rgb(144,147,153);
    }

    #app_div1_div1_div1 ul li ul li >span{
        font-weight: 700;
    }

    /*鼠标移动到父级菜单时显示子菜单*/
    #app_div1_div1_div1 ul li:hover ul {
        display: block;
    }

    #app_div1_div1_div2{
        /* border: 1px solid red; */
        width: 75%;
        height: 100%;
        /* display: flex; */
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    #app_div2{
        width: 100%;
        height: 80vh;
        display: flex;
        /* border: 1px solid red; */
        background: rgb(245,247,250);
        justify-content: center;
        align-items: center;
    }

    #app_div2_div1{
        /* border: 1px solid red; */
        width: 80%;
        height: 100%;
    }

    #app_div2_div1_div1{
        width: 100%;
        height: 10%;
        /* border: 1px solid red; */
        display: flex;
        align-items: center;
    }

    #app_div2_div1_div1>span{
        font-size: 20px;
    }

    .app_div2_div1_div1_div{
        width: 80%;
        height: 100%;
        /* border: 1px solid red; */
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #app_div2_div1_div2{
        width: 100%;
        height: 90%;
        /* border: 1px solid red; */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .app_div2_div1_div2_div{
        width: 23%;
        height: 45%;
        border: 1px solid rgb(233, 233, 233);
        border-radius: 5px;
        box-shadow:0px 4px 4px 4px #888888;
    }

    .app_div2_div1_div2_div1{
        /* border: 1px solid red; */
        width: 100%;
        height: 55%;
        border-radius: 5px 5px 0px 0px;
    }

    .app_div2_div1_div2_div1>img{
        border-radius: 5px 5px 0px 0px;
        width: 100%;
        height: 100%;
    }

    .app_div2_div1_div2_div2{
        /* border: 1px solid red; */
        width: 100%;
        height: 45%;
        border-radius:0px 0px 5px 5px;
    }

    .app_div2_div1_div2_div2_div1{
        /* border: 1px solid red; */
        width: 95%;
        height: 40%;
        font-size: 14px;
        color: #545C63;
        line-height: 20px;
        /* text-overflow: ellipsis; */
        /* white-space: nowrap; */
        overflow: hidden;
        padding-top: 5px;
        padding-bottom: 5px;
        margin:auto;
    }

    .app_div2_div1_div2_div2_div2{
        /* border: 1px solid red; */
        width: 95%;
        height: 20%;
        display: flex;
        align-items: center;
        color: #9199A1;
        font-size: 12px;
        margin:auto;
    }

    .app_div2_div1_div2_div2_div3{
        /* border: 1px solid red; */
        width: 95%;
        height: 25%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #F01414;
        margin:auto;
        font-weight: 700;
    }

    /*  */

    #app_div3{
        width: 100%;
        height: 80vh;
        display: flex;
        /* border: 1px solid red; */
        background: rgb(242,242,242);
        justify-content: center;
        align-items: center;
    }

    #app_div3_div1{
        /* border: 1px solid red; */
        width: 80%;
        height: 100%;
    }

    #app_div3_div1_div1{
        width: 100%;
        height: 10%;
        /* border: 1px solid red; */
        display: flex;
        align-items: center;
    }

    #app_div3_div1_div1>span{
        font-size: 20px;
    }

    .app_div3_div1_div1_div{
        width: 80%;
        height: 100%;
        /* border: 1px solid red; */
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #app_div3_div1_div2{
        width: 100%;
        height: 90%;
        /* border: 1px solid red; */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .app_div3_div1_div2_div{
        width: 23%;
        height: 45%;
        border: 1px solid rgb(233, 233, 233);
        border-radius: 5px;
        box-shadow:0px 4px 4px 4px #888888;
    }

    .app_div3_div1_div2_div1{
        /* border: 1px solid red; */
        width: 100%;
        height: 55%;
        border-radius: 5px 5px 0px 0px;
    }

    .app_div3_div1_div2_div1>img{
        border-radius: 5px 5px 0px 0px;
        width: 100%;
        height: 100%;
    }

    .app_div3_div1_div2_div2{
        /* border: 1px solid red; */
        width: 100%;
        height: 45%;
        border-radius:0px 0px 5px 5px;
    }

    .app_div3_div1_div2_div2_div1{
        /* border: 1px solid red; */
        width: 95%;
        height: 40%;
        font-size: 14px;
        color: #545C63;
        line-height: 20px;
        /* text-overflow: ellipsis; */
        /* white-space: nowrap; */
        overflow: hidden;
        padding-top: 5px;
        padding-bottom: 5px;
        margin:auto;
    }

    .app_div3_div1_div2_div2_div2{
        /* border: 1px solid red; */
        width: 95%;
        height: 20%;
        display: flex;
        align-items: center;
        color: #9199A1;
        font-size: 12px;
        margin:auto;
    }

    .app_div3_div1_div2_div2_div3{
        /* border: 1px solid red; */
        width: 95%;
        height: 25%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #F01414;
        margin:auto;
        font-weight: 700;
    }

    .login_tity{
        display: flex;
        width: 100%;
        height: 21vh;
        /* border: solid 1px black; */
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #666666;
    }

    .links{
        /* border: solid 1px black; */
    }

    .links>a{
        text-decoration: none;
        margin: 10px;
        color: #666666;
    }

    .copyright{
        text-align: center;
        margin-top: 10px;
    }

</style>

<body>

<div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
            <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
        </el-menu-item>
        <el-menu-item index="1"><a href="/videoWeb/fronts/index.html"><i class="el-icon-s-home"></i>主页</a></el-menu-item>
        <el-menu-item index="2">实战课</el-menu-item>
        <el-menu-item index="3">体系课</el-menu-item>
        <el-menu-item index="4"><a href="" target="_blank">手记</a></el-menu-item>
        <el-menu-item >
            <el-input placeholder="请输入关键字" v-model="input" clearable style="width:250px"></el-input>
            <el-button size="medium" icon="el-icon-search"></el-button>
        </el-menu-item>

        <el-menu-item style="float: right;" v-if="code != 100">
            <a href="">注册</a>
            /
            <a href="login.html">登录</a>
        </el-menu-item>

        <el-submenu index="5" style="float: right;" v-if="code === 100">
            <template slot="title">
                <div class="demo-type" style="display:inline-block">
                    <div>
                        <el-avatar :src="imgSrc"></el-avatar>
                    </div>
                </div>
            </template>
            <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
            <el-menu-item index="5-2">
                <a href="/videoWeb/fronts/myFriends.html">
                    <i class="el-icon-user-solid"></i>
                    我的好友
                </a>
            </el-menu-item>
            <el-menu-item index="5-3">
                <a href="/videoWeb/fronts/myHead.html">
                    <i class="el-icon-user"></i>
                    个人中心
                </a>
            </el-menu-item>
            <el-menu-item index="5-4" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
        </el-submenu>

        <el-menu-item style="float: right;"><a href="/videoWeb/fronts/home.html">创作中心</a></el-menu-item>

    </el-menu>

    <div id="app_div1">
        <div id="app_div1_div1">

            <div id="app_div1_div1_div1">
                <ul>

                    <li>
                        <a href="#" target="blank">
                            前端开发： HTML5 / Vue.js / Node.js
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" target="blank">
                            后端开发： Java / Python / Go
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" target="blank">
                            移动开发： Flutter / Android / iOS
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" target="blank">
                            计算机基础： 算法 / 数学 / 数据库
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" target="blank">
                            前沿技术： AI / 大数据 / 数据分析
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" target="blank">
                            测试运维： 自动化测试 / 容器
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" target="blank">
                            更多方向： 产品设计 / UI设计 / 游戏
                            <i class="el-icon-caret-right"></i>
                        </a>
                        <ul>
                            <li><span>前端开发</span></li>
                            <li><a href="#">竞赛规程</a></li>
                            <li><a href="#">报名须知</a></li>
                            <li><a href="#">参赛声明</a></li>
                            <li><a href="#">比赛路线</a></li>
                        </ul>
                    </li>

                </ul>
            </div>

            <div id="app_div1_div1_div2">
                <template>
                    <el-carousel :interval="5000" arrow="always" :height="height">
                        <el-carousel-item v-for="item in urls" :key="item">
                            <a href="">
                                <img :src="item" style="width: 100%; height: 100%;">
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
        </div>
    </div>

    <div id="app_div2">
        <div id="app_div2_div1">
            <div id="app_div2_div1_div1">
                <i class="el-icon-video-camera-solid" style="font-size:20px;margin:0px 10px;"></i>
                <span>热门视频</span>
                <i class="el-icon-refresh-left" style="margin:0px 10px;justify-content: flex-end;" @click="RefreshHotVideo">换一页</i>
                <div class="app_div2_div1_div1_div">
                    <a href="/videoWeb/fronts/more.html?type=hotMore">
                        全部
                        <i class="el-icon-arrow-right" style="font-size:20px;margin:0px 10px;justify-content: flex-end;"></i>
                    </a>
                </div>
            </div>
            <div id="app_div2_div1_div2">

                <div class="app_div2_div1_div2_div" v-for="item in videoList0" :key="item">
                    <a :href="'/videoWeb/fronts/videoDetails.html?videoId=' + item.id ">
                        <div class="app_div2_div1_div2_div1">
                            <img :src="item.imgSrc" style="width: 100%;height: 100%;">
                        </div>
                        <div class="app_div2_div1_div2_div2">
                            <div class="app_div2_div1_div2_div2_div1">
                                {{item.explain}}
                            </div>
                            <div class="app_div2_div1_div2_div2_div2">浏览量：{{item.videoView}}</div>
                            <div class="app_div2_div1_div2_div2_div3">作者：{{item.username}}</div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div id="app_div3">
        <div id="app_div3_div1">
            <div id="app_div3_div1_div1">
                <i class="el-icon-video-camera-solid" style="font-size:20px;margin:0px 10px;"></i>
                <span>最新视频</span>
                <i class="el-icon-refresh-left" style="margin:0px 10px;justify-content: flex-end;" @click="RefreshVideoNewest">换一页</i>
                <div class="app_div3_div1_div1_div">
                    <a href="/videoWeb/fronts/more.html?type=newMore">
                        全部
                        <i class="el-icon-arrow-right" style="font-size:20px;margin:0px 10px;justify-content: flex-end;"></i>
                    </a>
                </div>
            </div>
            <div id="app_div3_div1_div2">

                <div class="app_div3_div1_div2_div" v-for="item in videoList" :key="item">
                    <a :href="'/videoWeb/fronts/videoDetails.html?videoId=' + item.id ">
                        <div class="app_div3_div1_div2_div1">
                            <img :src="item.imgSrc">
                        </div>
                        <div class="app_div3_div1_div2_div2">
                            <div class="app_div3_div1_div2_div2_div1">
                                {{item.explain}}
                            </div>
                            <div class="app_div3_div1_div2_div2_div2">浏览量：{{item.videoView}}</div>
                            <div class="app_div3_div1_div2_div2_div3">作者：{{item.username}}</div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="login_tity">
        <div class="links">
            <a href="">
                关于我们
            </a>
            |
            <a href="">
                联系我们
            </a>
            |
            <a href="">
                人才招聘
            </a>
            |
            <a href="">
                商家入驻
            </a>
            |
            <a href="">
                广告服务
            </a>
            |
            <a href="">
                手机蛇皮
            </a>
            |
            <a href="">
                友情链接
            </a>
            |
            <a href="">
                销售联盟
            </a>
            |
            <a href="">
                蛇皮社区
            </a>
            |
            <a href="">
                蛇皮公益
            </a>
            |
            <a href="">English Site</a>
            <div class="copyright">
                Copyright&nbsp;©&nbsp;2004-2021&nbsp;&nbsp;蛇皮SP.com&nbsp;版权所有
            </div>
        </div>

    </div>

</div>

</body>

<script>
    new Vue({
        el:'#app',
        data:{
            urls:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            code:1,//登录状态
            name:"",//姓名
            imgSrc:'',//头像
            id:0,//用户id
            //以下为热门视频的参数
            pageNo0:1,
            pageSize0:8,
            pageTotal0:0,
            videoList0:[],
            videoView0:0,
            //以下为最新视频的参数
            pageNo:1,
            pageSize:8,
            pageTotal:0,
            videoList:[],
            videoView:0,
        },
        mounted:function(){
            this.autoHeight();
            this.login();
            this.videoNewest();
            this.hotVideo();
        },
        methods:{
            isCollapse: true,
            autoHeight:function() {//设置轮播图高度
                this.height = $("#app_div1_div1_div2").height() + 'px';
            },
            login:function(){//获取登录token信息
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.imgSrc = res.data.headImg;
                            that.id = res.data.id;
                        }
                        if(res.code == 401){
                            location.href="../../../../fronts/login.html";
                        }
                    }
                })
            },
            loginOut:function(){//退出
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        location.href="../../../../fronts/login.html";
                    }
                })
            },
            videoNewest:function(){//最新视频
                var that = this;
                $.ajax({
                    url:"/videoWeb/videoNewest",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    data:{
                        pageNo:this.pageNo,
                        pageSize:this.pageSize,
                    },
                    success:function(res){
                        console.log(res);
                        that.videoList = res.items;
                        that.pageTotal = res.pageTotal;
                        that.videoView = res.videoView;
                    }
                })
            },
            RefreshVideoNewest:function(){//换页最新视频
                this.pageNo = this.pageNo + 1;
                if(this.pageNo > this.pageTotal){
                    this.pageNo = 1;
                }
                this.videoNewest();
            },
            hotVideo:function(){//最新视频
                var that = this;
                $.ajax({
                    url:"/videoWeb/hotVideo",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    data:{
                        pageNo:this.pageNo0,
                        pageSize:this.pageSize0,
                    },
                    success:function(res){
                        that.videoList0 = res.items;
                        that.pageTotal0 = res.pageTotal;
                        that.videoView0 = res.videoView;
                    }
                })
            },
            RefreshHotVideo:function(){//换页最新视频
                this.pageNo0 = this.pageNo0 + 1;
                if(this.pageNo0 > this.pageTotal0){
                    this.pageNo0 = 1;
                }
                this.hotVideo();
            },
        },
    })
</script>

</html>
